<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="name" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="age" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="addFN">添加/修改</button>
    </div>
    <div>
      <table border="1" cellpadding="10" cellspacing="0">
        <tr v-for="(obj, index) in list" :key="index">
          <th>{{ index + 1 }}</th>
          <th>{{obj.name}}</th>
          <th>{{obj.age}}</th>
          <th>{{obj.sex}}</th>
          <th>
            <button @click="shan(index)">删除</button>
            <button @click="edit(obj,index)">编辑</button>
          </th>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    data() {
      return {
        name: '',
        age: 0,
        sex: '男',
        ind: -1,
        list: [{
            name: "Tom",
            age: 19,
            sex: "男"
          },
          {
            name: "Jone",
            age: 21,
            sex: "女"
          }
        ],
      }
    },
    methods: {
      addFN() {
        let obj = {
          name: this.name,
          age: this.age,
          sex: this.sex
        };
        if (this.ind == -1) {
          this.list.push(obj)
          this.name = '',
            this.age = 0,
            this.sex = '男'
        } else {
          Vue.set(this.list, this.ind, obj);
          this.ind = -1
          this.name = '',
            this.age = 0,
            this.sex = '男'
        }
      },
      shan(index) {
        this.list.splice(index, 1)
      },
      edit(obj, index) {
        this.name = obj.name,
          this.age = obj.age,
          this.sex = obj.sex,
          this.ind = index
      }


    }
  }
</script>